import { login, getProfile, getUserDetailById } from '@/api/user.js'
// 引入花裤衩封装好的cookie处理函数
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const state = {
  // 持久化步骤 2 每当刷新, 初始化时尝试取旧数据
  token: getToken() || '',
  // 当前登录用户的信息
  profile: null
}
const mutations = {
  setToken(state, data) {
    setToken(data)
    state.token = data
  },
  setProfile(state, data) {
    state.profile = data
  },
  removeToken(state, data) {
    state.token = ''
    removeToken(data)
  },
  removeProfile(state) {
    state.profile = null
  }
}
// 异步请求都得放在actions里
const actions = {
  // 每个 action 默认的到两个形参
  // 1. 当前仓库实例, 2. 调用时的传参
  async login(store, data) {
    const res = await login(data)
    // console.log('vuex的登录', res)
    store.commit('removeToken', res)
    store.commit('setToken', res)
    // 主动介入token失效步骤，记录登录时的时间戳
    localStorage.setItem('loginTime', Date.now())
    // console.log('请求成功后会执行的语句')
  },
  async getProfile(store) {
    const res = await getProfile()
    // console.log(res)
    const detail = await getUserDetailById(res.userId)

    store.commit('setProfile', {
      ...res,
      ...detail
    })
  },
  logout(store) {
    store.commit('removeToken')
    store.commit('setProfile')
    // 花裤衩封装的函数 用来解决高权限用户退出时没有清除权限，导致低权用户可以通过路径访问到高权限用户的页面
    resetRouter()
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions

}
